<template>
  <div class="main">
    <div class="main-left">
      <el-menu default-active="2" class="article-nav"  :unique-opened="true" router>
        <template v-for="item in articleNav">

          <el-submenu index="1" v-if="item.children">
            <template slot="title"><i class="el-icon-message"></i>{{item.meta.title}}</template>
            <el-menu-item-group>
              <template v-for="children in item.children">
                <el-menu-item :index="children.path" >{{children.meta.title}}</el-menu-item>
              </template>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item :index="item.path"><i class="el-icon-menu"></i>{{item.meta.title}}</el-menu-item>
        </template>
      </el-menu>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  computed:{
      articleNav:function () {
          if(this.$router.options){
            for(let i=0;i<this.$router.options.routes[1].children.length;i++){
              if(this.$router.options.routes[1].children[i].path===this.$route.matched[this.$route.matched.length-1].parent.path){
                return this.$router.options.routes[1].children[i].children;
              }
            }
          }

      }
  },
  mounted(){
    console.log(this.articleNav);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .article-nav{
    height: 100%;
  }
</style>
